<!DOCTYPE html>
<html>
    <head>
        <title>家乡主页</title>
        <meta charset="utf-8">
        <style>
            body{
                margin:0;
                margin-bottom:80px;
                background-color:antiquewhite;
            

            }
        
            #shelf{
                height:300px;
                background-image:url(bg.jpg);
                background-position:50% 50%;
                margin-top:80px;
                
            }
                

            #container{
                margin:0 auto;
                width:800px;
                height:2000px;
            }

            .pic{
                width:100%;

            }
     
          .pho{
              width:200px;
              height:200px;
              border-radius:50%;
              border:solid 4px white;
              position:absolute;
          }
          .draw{
              width:100%;
          }

          .paper{
              width:100%;
              margin:0 auto;
              position:relative;
          }
           

          #first{
               
               
              left:50px;
              top:60px;
             
          }

          #second{
               
              
              left:300px;
              bottom:100px;
           
          }

          #third{
              right:30px;
              top:40px;
               
          }

            .text{
                text-align:center;
                color:blueviolet;
            }
            .doc{
                text-align:center;
                color:brown;
            }
            .attachment{
                text-align:center;
                color:purple;
            }
            h1{
                color:red;
                font-size:20;
                text-align:center;
            }

            h2{
                color:brown;
                text-align:center;
            }  
            h3{
                color:red;
                text-align:center;
            }
            
             p{
                font-family:times New Roman;
                text-align:left;
                text-indent:2em;
             }
             fixed{
                  width:200px;
                  height:100px;
                  background-color:khaki;
                  position:fixed;
                  left:30px;
                  top:80px;
             }

             body{
                 height:2000px;
             }
             .bg-con{
                 height:600px;
                 background-image:url(tong.png);
                 background-size:100% 100%;
                 position:relative;
                 z-index:-1;
             }
             #nav{
                 /*background-color:red;*/
                 width:100%;
                 height:80px;
                 position:fixed;
                 top:0;
                 left:0;
                 z-index:2;
             }

             #inner-nav{
                 width:800px;
                 margin:0 auto;
                 height:80px;
                 text-align:center;
                 line-height:60px;
             }
             #inner-nav a{
                 margin:0 auto;
                 text-decoration:underline;
                 color:blue;
                 font-size:30px;
                 display:inline-block;
                 height:90px;
             }

             #inner-nav a:hover{
                 background-color:bisque;
             }

             #mates{
                 font-size:24px;
                 text-align:center;
                 color:brown;
             }
        </style>
    </head>
    <body>

        <div id="nav"> 
        <div id="inner-nav">
        <a href="#my college">我的学校</a>
        <a href="#my hometown">我的家乡</a>
        <a href="#my classmates">我的同学</a>
        </div>
        </div>
        <div id="shelf"></div>
        <h1>Sophy</h1>
        <h2>welcome to my hometown</h2>

        <div id="container">
            <div>
            <h1>驻马店</h1>
            
        <p class="text">驻马店是河南省下辖地级市，位于河南中南部，北接漯河，南临信阳，地处淮河上游的丘陵平原地区。古为交通要冲，因历史上南来北往的信使、官宦在此驻驿歇马而得名。素有“豫州之腹地、天下之最中”的美称。京广铁路、京珠、大广高速和107、106国道纵贯南北，新阳高速横跨东西，上武高速和焦桐高速穿境而过，省道、县道纵横交错。2015年户籍905.21万；常住695.55万。</p>
        <image class="pic" src="jiaxiang.png">
            </div>
        <p class="doc">驻马店历史悠久，人杰地灵，名胜古迹众多，自然风光秀美。是华夏文明的重要发祥地之一，是中华民族的人文始祖盘古创世纪活动的核心区域，是轩辕黄帝的夫人嫘祖的故乡，是战国时期闻名天下的兵器制造中心。秦丞相李斯、《盐铁论》的编著者桓宽、志怪志异小说家干宝、伟大的无神论者范缜、著名抗日民族英雄杨靖宇等一大批历史名人。这里是盘古文化、梁祝文化、重阳文化、车舆文化、嫘祖文化和冶铁铸剑文化的发源地，泌阳、汝南、上蔡、平舆、西平分别被命名为“中国盘古圣地”、“中国梁祝之乡”、“中国重阳文化之乡”、“车舆文化之乡”、“嫘祖文化之乡”和“冶铁铸剑文化之乡”。同时是红色革命根据地之一、享有“小延安”之称的确山县竹沟镇曾是中共中央中原局和河南省委所在地，刘少奇、李先念等老一辈革命家在这里战斗生活过，其旧址至今保存完好。</p>
        <image claas="pho" src="shanshui.png">
            <hr>
            <p class="attachment">在距今约4500年的西平杨庄新石器文化遗址中发现有地面式房基、儿童瓮棺、窖穴、精致的石器和各种各样的陶器，说明这里已有房屋和村庄，产生了农业、畜牧业，制陶制石的手工业也比较发达。周灭商后，周武王分封诸侯，分其兄度据蔡。这里有蔡（今上蔡县）、吕（今新蔡）、沈（今平舆县及汝南县东部，正阳县北部）、江（今正阳县及确山县南部）、道（今确山县北部、汝南县西部和驿城区）、房（今遂平县）、柏（今西平县）、中（今泌阳县）等小封国。这些小封国先后被楚国吞并，战国七雄长期在这里相互攻伐。</p>
            <image class="draw" src="lishi.png">
                <hr>
                <div>
            <h3>我的同学</h3>
            <p id="mates">我的三个同学,Tina,Selina和Vera.我们是很好的朋友。</p>
            <div class="bg-con">

            
            
        
        <img class="pho" src="li.jpg"  id="first">
        <img class="pho" src="b.jpg" id="second">
        <img class="pho" src="mei.jpg" id="third">
    
        
        </div>
        
        <div id=“fixed>
        
        
        </div>
    </body>
</html>